<template>
  <div class="examInfo_container  answerlist_container">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="left">

        <div class="leftItem">

          <p>
            当前考试名称：

          </p>
          <p class="name">
            {{examInfo.theme}}

          </p>

          <p>
            考试限时：

          </p>
          <p class="name">
            {{examInfo.duration}}分钟

          </p>

          <p>
            考试时间：
          </p>
          <p class="name">
            {{examInfo.startTime}}至 {{examInfo.endTime}}
          </p>

        </div>

        <div class="left_footer">

          <el-button type="primary" @click="toIndex"> 返回首页</el-button>

          <el-button type="primary" @click="recordlist()">我的考试记录</el-button>

        </div>

      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">

        <div class="rightItem">

          <div class="recordItem">

            <h5 class="name"> {{examInfo.theme}}</h5>
            <p class="name"> {{examInfo.startTime}}至 {{examInfo.endTime}}</p>

            <div class="answerlists" v-for="(item,index) in list" :key="item.id">

              <!-- <p>
                {{item.qType == 1 ? "单选" :item.qType == 2? "多选":item.qType == 3 ?"不定向":"填空题"}}
              </p> -->
              <p>【题目{{index+1}}-- {{getType(item)}}】：{{item.qContent}}</p>
              <div v-if="item.qType==1||item.qType==3||item.qType==4">
                <p class="corrent">正确答案：{{item.correctAnswers[0]}}</p>
                <p>
                  我的答案： {{item.userAnswers[0]}}
                </p>

              </div>
              <div v-if="item.qType==2||item.qType==0">
                <p class="corrent" v-for="v in item.correctAnswers" :key="v.id">正确答案：{{v}}</p>
                <p v-for="(j,dd) in item.userAnswers" :key="dd">
                  我的答案： {{j}}
                </p>

              </div>
            </div>

          </div>

        </div>

      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
</style>
<script>
import path from '@/network'
export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      examPaper: JSON.parse(sessionStorage.getItem("examPaper")),
      examInfo: JSON.parse(sessionStorage.getItem('examInfo')),
      examResultInfo: JSON.parse(sessionStorage.getItem('examResultInfo')),
      examId: this.$route.query.id,
      recordId: this.$route.query.recordId,
      list: [],
    };
  },
  created () {
  },
  mounted () {
    this.recordReport()
  },

  methods: {

    recordReport () {
      path.recordReport({
        examId: this.$route.query.id,
        recordId: this.$route.query.recordId,
      }).then(res => {
        if (res.success === 0) {
          this.list = res.rows
        }
      })
    },
    getType: function (item) {
      var currExamTypeStr = '';
      if (item.qType == 0) {
        currExamTypeStr = "不定项";
      }
      if (item.qType == 1) {
        currExamTypeStr = "单选题";
      }
      if (item.qType == 2) {
        currExamTypeStr = "多选题";
      }
      if (item.qType == 3) {
        currExamTypeStr = "判断题";
      }
      if (item.qType == 4) {
        currExamTypeStr = "填空题";
      }
      return currExamTypeStr;
    },


    toplist: function () {
      this.$router.push({ name: 'toplist', query: { id: this.$route.query.id, } })
    },

    recordlist: function () {
      this.$router.push({ name: 'recordlist', query: { id: this.$route.query.id, } })
    },

    toIndex: function () {
      this.$router.push({ name: 'index' })
    },
  }
}

</script>